<template>
    <view class="container">
        <view class="tenant" style="border-bottom: 1px solid #c1c1c1;">
            <view class="_text">
                我是租客
            </view>
            <view class="_box">
                <image src="/static/icon/ts_o.png" mode=""></image>
                <text>我要投诉</text>
            </view>
        </view>
        <view class="tenant" style="border-bottom: 1px solid #c1c1c1;">
            <view class="_text">
                我是商家
            </view>
            <view class="_box" @click="goApply(1)">
                <image src="/static/icon/grs.png" mode=""></image>
                <text>房东入驻</text>
            </view>
            <view class="_box" @click="goApply(2)">
                <image src="/static/icon/grs.png" mode=""></image>
                <text>经纪人入驻</text>
            </view>
        </view>
        <view class="tenant">
            <view class="_text">
                我是业主/中介
            </view>
            <view class="_box" @click="transfer(3)">
                <image src="/static/icon/grs.png" mode=""></image>
                <text>房屋托管</text>
            </view>
            <view class="_box" @click="transfer(1)">
                <image src="/static/icon/grs.png" mode=""></image>
                <text>托管房源</text>
            </view>
        </view>
        <view class="_call">
            客服电话<text>400-880-5911</text>
        </view>

        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    export default {
        name: "contact",
        methods:{
            goApply(type){
                uni.navigateTo({url: '/pages/user/index/apply' + uni.$u.queryParams({type:type})});
            },

            transfer(type){
                uni.navigateTo({url: '/pages/landlord/index/transfer' + uni.$u.queryParams({type: type})});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: 1230rpx;
        padding: 20rpx;
        position: relative;
        .tenant {
            width: 100%;
            height: 27%;
            // background-color: yellow;

            ._text {
                margin-top: 30rpx;
                font-size: 14px;
                font-weight: 600;
            }

            ._box {
                display: inline-block;
                width: 26%;
                height: 62%;
                margin-top: 30rpx;
                border-radius: 10rpx;
                text-align: center;
                margin-right: 50rpx;
                /*box-shadow: 2rpx 2rpx 2rpx 2rpx #c1c1c1;*/
                box-shadow: 0 0 10rpx #c1c1c1;
                overflow: hidden;

                image {
                    margin: 20rpx auto;
                    width: 80rpx;
                    height: 80rpx;
                    display: block;
                }

                text {
                    display: inline-block;
                    font-size: 12px;
                    color: black;
                    margin-top: 10rpx;
                }
            }
        }

        ._call {
            width: 100%;
            height: 50rpx;
            font-size: 14px;
            text-align: center;
            position: fixed;
            bottom: 40rpx;
            text{
                color: #f17d30;
                margin-left: 20rpx;
            }
        }
    }
</style>
